<template>
    <div class='container'>
        <Category>
            <!-- 往哪个插槽里面放，就在slot里面定义 -->
            <image slot="center" src="https://cn.bing.com/images/search?view=detailV2&ccid=2C76ua8T&id=ABB3F7E4976AE903F542D1CAAA8E89112E86B07C&thid=OIP.2C76ua8TPaSY1oaxofa4EgHaIF&mediaurl=https%3a%2f%2fwww.thewikifeed.com%2fwp-content%2fuploads%2f2022%2f10%2fice-spice-1.jpg&cdnurl=https%3a%2f%2fts1.cn.mm.bing.net%2fth%2fid%2fR-C.d82efab9af133da498d686b1a1f6b812%3frik%3dfLCGLhGJjqrK0Q%26pid%3dImgRaw%26r%3d0&exph=600&expw=550&q=Ice+Spice&simid=607991482200767953&FORM=IRPRST&ck=8650C8E5CC7A9191E120A2E6CC19753D&selectedIndex=0" />
            <a slot='footer' href='' >test</a>
            <video slot="footer" controls />
        </Category>
        <Category>
            <span slot='footer'>testtest66666666666</span>
            <video slot="center" controls />
        </Category>
        <Category>
            <!-- v-slot:center是template的专用写法，就等价于slot='center' -->
            <!-- v-slot:center是template的专用写法 -->
            <template v-slot:center>
                <video controls />
            </template>
        </Category>
    </div>
</template>

<script>
    // 要删掉.vue不然会报错
    import Category from './components/Category'
    export default {
        name : "App",
        components:{
            Category,
        }
    }
</script>

<style scoped>
    .container{
        /* css加分号 */
        display:flex;
        height: 300px;
        justify-content: space-around;
    }
    image{
        width: 100%;
        display:inline;
    }
    video{
        width: 100%;
    }
</style>